﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        img{
            width:200px;
        }
    </style>
</head>
<body>
    <!--拖拽事件 需要给标签设置可拖拽
    draggable="true"
    img标签默认为可拖拽-->
    <img draggable="false" src="https://m15.360buyimg.com/mobilecms/s1062x420_jfs/t1/33428/39/16450/106681/6311cad7Ef9b3d856/f10720b7f8f38937.jpg!cr_1053x420_4_0!q70.jpg" alt="">
    <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/3230/40/20384/44107/62daf2d9E5c5e0e55/03ab360c40ddc266.jpg!cr_1125x449_0_166!q70.jpg" alt="">
    <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/110775/22/28940/94917/62e5bc6dE569b2244/5d14fc9f06d87341.jpg!cr_1125x449_0_166!q70.jpg" alt="">
    <script>
        var imgs = document.images;
        for (var i in imgs) {
            //先给标签添加可拖拽事件 才能触发事件
            imgs[i].draggable = true;
            imgs[i].ondragstart = function (e) {
                console.log(`图片被托拽了`,e.target);
            }
            imgs[i].ondragenter = function (e) {
                console.log(`图片被托拽了其他元素上了`, e.target);
            }
            imgs[i].ondragover = function (e) {
                //console.log(`图片被托拽在其他元素上移动`, e.target);
            }
            imgs[i].ondragleave = function (e) {
                console.log(`移出其他事件`, e.target);
            }
            imgs[i].ondragend = function (e) {
                console.log(`结束拖拽事件`, e.target);
            }
            //imgs[i].ondrop = function () {
            //    console.log(`松开拖拽事件`);
            //}
        }
    </script>
</body>
</html>